<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用模板</title>
</head>
<body>
<script src="../js/vue.js"></script>


<div id="app">
    {{age}}<br>
    <input type="button" value="点我年龄+1" @click="changeAgeAdd(20)">
    <input type="button" value="点我年龄-1" @click="changeAgeDec">
</div>

<script>
    var app = new Vue({
        el: "#app",   //element:元素
        data: {        //data:数据 用来vue实例对象绑定一系列数据
            msg: "hello vue",
            age: 2
        },
        methods: {
            changeAgeAdd: function (num) {

                this.age = this.age + num
            },
            changeAgeDec: function () {
                if (this.age<=0){
                    alert("你年龄负数???傻狗")
                    return
                }
                this.age--
            }
        }
    });
</script>
</body>
</html>